<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>二维码详情</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        .qr-code {
            text-align: center;
            margin-bottom: 20px;
        }
        .qr-code img {
            max-width: 300px;
        }
        .message {
            text-align: center;
            margin-bottom: 20px;
            color: red;
        }
        .form-details {
            margin-bottom: 20px;
        }
        .form-details h2 {
            text-align: center;
        }
        .form-details table {
            width: 50%;
            margin: 0 auto;
            border-collapse: collapse;
        }
        .form-details th, .form-details td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }
        .form-details th {
            background-color: #f2f2f2;
        }
        .button-container {
            text-align: center;
        }
        .button-container a {
            padding: 10px 20px;
            background-color: #007bff;
            color: white;
            text-decoration: none;
            border-radius: 5px;
        }
        .button-container a:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>
<div class="qr-code">
    <img th:src="@{${qrCodeUrl}}" alt="QR Code"/>
</div>
<div class="message">
    提示：此二维码仅可核销一次，请勿泄露给他人。
</div>
<div class="form-details">
    <h2>表单详情</h2>
    <table>
        <tr>
            <th>手机号</th>
            <td th:text="${formData.phoneNumber}"></td>
        </tr>
        <tr>
            <th>成人人数</th>
            <td th:text="${formData.numberOfPeople}"></td>
        </tr>
        <tr>
            <th>儿童人数</th>
            <td th:text="${formData.numberOfChildren}"></td>
        </tr>
        <tr>
            <th>收取费用</th>
            <td th:text="${formData.chargeAmount}"></td>
        </tr>
    </table>
</div>
<div class="button-container">
    <a href="/form">继续填写表单</a>
</div>
</body>
</html>
